<template>
  <div style="padding: 0 60px; margin-bottom: 20px">
    <div class="line">
      <span class="title" style="width: 78%"><b>毕业</b>去向省市分布</span>
      <span class="title" style="width: 22%"
        ><b>招聘</b>信息
        <router-link
          to="job_dash"
          style="font-weight: 500; color: rgb(249 187 11); border: none"
          >|MORE</router-link
        >
      </span>
    </div>
    <div class="content">
      <china-map ref="map" style="width: 78%" class="border" />
      <div class="border recruit" style="width: 22%; height: 540px">
        <ul v-for="(item, i) in list" :key="i" class="text item">
          <li>
            <a :href="item.website" target="_blank">
              {{ item.title }}
            </a>
            <span class="datetime"> [ {{ item.datetime }} ] </span>
          </li>
        </ul>
      </div>
    </div>

    <div class="line">
      <span class="title" style="flex: 3.2; margin: 0px 5px"
        ><b>单位</b>性质</span
      >
      <span class="title" style="flex: 2.8; margin: 0px 5px"
        ><b>热门</b>城市</span
      >
      <span class="title" style="flex: 4; margin: 0px 5px"
        ><b>毕业</b>数量和就业率</span
      >
    </div>
    <div class="content">
      <pie ref="pie" class="border" style="flex: 3.2" />
      <bar-chart ref="bar" class="border" style="flex: 2.8" />
      <broken ref="broken" class="border" style="flex: 4" />
      <!-- <div class="line"></div> -->
      <!-- <div class="border"> -->
      <!-- </div> -->
    </div>
    <!-- <div class="line">
      <span class="title"><b>单位</b>性质</span>
    </div>
    <div class="border">
      <bar-chart ref="bar" />
    </div> -->
  </div>
</template>
<style scoped>
.title {
  width: 50%;
  display: block;
  text-align: left;
  font-size: 18px;
  font-weight: bold;
}
b {
  color: #c91111;
  border-bottom: solid 2px #c91111;
  padding: 5px 0;
}
.line {
  display: flex;
  flex-wrap: nowrap;
  padding: 5px;
  margin: 2px;
}
.content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-start;
}
ul {
  height: 15px;
  /* border-bottom: dotted 1px #ababab; */
}
ul li {
  padding: 0 0 0 18px;
  height: 15px;
  background: url(../assets/dot1.png) left center no-repeat;
}
.recruit {
  padding: 0 10px;
  /* padding-right: 20px; */
}
.text {
  font-size: 16px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 20%;
}

.border {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 5px;
  background: #ffffff;
}

a {
  /* overflow: hidden; 自动隐藏文字 */
  /* text-overflow: ellipsis; 文字隐藏后添加省略号 */
  /* white-space: nowrap; 强制不换行 */
  /* width: 13em; 不允许出现半汉字截断 */
  text-decoration: none;
  color: #000000;
  border-bottom: dotted 1px #ababab;
}

a:hover {
  text-decoration: none;
  color: #c91111;
  border-bottom: dotted 1px #ababab;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: left;
}

.datetime {
  color: gray;
  display: inline-block;
  /* font-size: 14px; */
}

@media (max-width: 1350px) {
  .datetime {
    display: none;
    /* color: gray; */
  }
}
</style>
<script>
import ChinaMap from "../components/ChinaMap";
import Broken from "../components/Broken";
import Pie from "../components/Pie";
import BarChart from "../components/BarChart.vue";
import { getRecruit } from "../api/mainApi";
export default {
  data() {
    return {
      list: [],
    };
  },
  components: { ChinaMap, Broken, Pie, BarChart },
  mounted() {
    this.getData();
    window.onresize = () => {
      this.$refs.map.resize();
      this.$refs.pie.resize();
      this.$refs.broken.resize();
      this.$refs.bar.resize();
    };
  },
  methods: {
    getData() {
      getRecruit(1, 12, (res) => {
        this.list = res.slice(0, 10);
      });
    },
    toURL(e) {
      window.location.href = e;
    },
  },
};
</script>
